<template>
  <div style="width:100%;height: 100%;background-color: #fff;">
    <div id="gtt-chart" ref="graphChart" style="width: 95%;height: 95%;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.myChart = echarts.init(document.getElementById("gtt-chart"))
      var data = [];
      var dataCount = 40;
      var startTime = +new Date();
      var categories = ['设备A1', '设备A2', '设备A3', '设备B1', '设备B2', '设备B3'];
      var types = [
        { name: '运行', color: '#75d874' },
        { name: '故障', color: '#bd6d6c' },
        { name: '等待', color: '#e0bc78' },
        { name: '备用', color: '#7b9ce1' },
      ];

      //产生模拟数据
      echarts.util.each(categories, function (category, index) {
        var baseTime = startTime;
        for (var i = 0; i < dataCount; i++) {
          var typeItem = types[Math.round(Math.random() * (types.length - 1))];
          var duration = Math.round(Math.random() * 1000000);
          data.push({
            name: typeItem.name,
            value: [
              index,
              baseTime,
              baseTime += duration,
              duration
            ],
            itemStyle: {
              normal: {
                color: typeItem.color
              }
            }
          });
          baseTime += Math.round(Math.random() * 2000);
        }
      });
      //设定图形效果
      function renderItem(params, api) {
        var categoryIndex = api.value(0);
        var start = api.coord([api.value(1), categoryIndex]);
        var end = api.coord([api.value(2), categoryIndex]);
        var height = api.size([0, 1])[1] * 0.6;

        var rectShape = echarts.graphic.clipRectByRect({
          x: start[0],
          y: start[1] - height / 2,
          width: end[0] - start[0],
          height: height
        }, {
          x: params.coordSys.x,
          y: params.coordSys.y,
          width: params.coordSys.width,
          height: params.coordSys.height
        });

        return rectShape && {
          type: 'rect',
          shape: rectShape,
          style: api.style()
        };

      }


      let option = {
        //鼠标提示
        tooltip: {
          formatter: function (params) {
            return params.marker + params.name + ': ' + params.value[3] + ' ms';
          }
        },
        //缩放
        dataZoom: [{
          type: 'slider',
          show: false,
          filterMode: 'weakFilter',
          showDataShadow: false,
          top: 550,
          height: 10,
          borderColor: 'transparent',
          backgroundColor: '#e2e2e2',
          // handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', //jshint ignore:line
          handleSize: 20,
          handleStyle: {
            shadowBlur: 6,
            shadowOffsetX: 1,
            shadowOffsetY: 2,
            shadowColor: '#aaa'
          },
          labelFormatter: '',
          start: 0,
          end: 70,
        }, {
          type: 'inside',
          filterMode: 'weakFilter'

        }],
        grid: {
          height: 350
        },
        xAxis: {
          min: startTime,
          scale: true,
          axisLabel: {
            formatter: function (val) {
              return Math.max(0, val - startTime) + ' ms';
            }
          }
        },
        yAxis: {
          data: categories
        },

        series: [{
          name: '运行',
          type: 'custom',
          renderItem: renderItem,
          itemStyle: {
            opacity: 0.8,
            color: "#75d874"
          },
          encode: {
            x: [1, 2],
            y: 0
          },
          data: data
        },
        {
          name: '故障',
          type: 'custom',
          renderItem: renderItem,
          itemStyle: {
            opacity: 0.8,
            normal: {
              color: "#bd6d6c",
              borderWidth: 2
            }
          },
          encode: {
            x: [1, 2],
            y: 0
          },
          data: data
        },
        {
          name: '等待',
          type: 'custom',
          renderItem: renderItem,
          itemStyle: {
            opacity: 0.8,
            normal: {
              color: "#e0bc78",
              borderWidth: 2
            }
          },
          encode: {
            x: [1, 2],
            y: 0
          },
          data: data
        },
        {
          name: '备用',
          type: 'custom',
          renderItem: renderItem,
          itemStyle: {
            opacity: 0.8,
            normal: {
              color: "#7b9ce1",
              borderWidth: 2
            }
          },
          encode: {
            x: [1, 2],
            y: 0
          },
          data: data
        }
        ]
      };
      console.log(JSON.stringify(option));
      this.myChart.setOption(option, true)
    }
  }
}
</script>

<style>

</style>